<template>
	<div class="lzp-table-container">
		<div class="header">
			<span class="title">姓名</span>
			<span class="title">年龄</span>
			<span class="title">性别</span>
			<span class="title">操作</span>
		</div>
		<div
			class="row"
			v-for="(item, index) in props.dataList"
			:key="'row' + index"
		>
			<span class="info">{{ item.name }}</span>
			<span class="info">{{ item.age }}</span>
			<span class="info">{{ item.gender }}</span>
			<button @click="handleDetail(item)">详情</button>
		</div>
	</div>
</template>
<script setup lang="ts">
const props = defineProps({
	dataList: {
		type: Array<{
			name: string;
			age: number;
			gender: string;
		}>,
		default: () => [
			{
				name: "张三",
				age: 18,
				gender: "男",
			},
			{
				name: "李四",
				age: 20,
				gender: "女",
			},
		],
	},
});
const emit = defineEmits(["detail"]);
const handleDetail = (item: any) => {
	emit("detail", item);
};
</script>

<style>
.lzp-table-container {
	position: relative;
	width: 250px;
}
.header {
	background-color: #fafafa;
}
.title {
	color: rgba(0, 0, 0, 0.85);
	display: inline-block;
	width: 60px;
	height: 30px;
	line-height: 30px;
	text-align: center;
}
.row {
	border-bottom: 1px solid #f5f5f5;
}
.info {
	color: red;
	display: inline-block;
	width: 60px;
	height: 30px;
	line-height: 30px;
	text-align: center;
}
</style>
